<template>
    <div class="history-import-page-wrap">
        <!-- 切换视图 -->
        <div
            v-show="needPage"
            class="change-page-btn iconfont"
            :class="[
                { icon_liebiao: showEcharts },
                { icon_tongji: !showEcharts }
            ]"
            @click="changePage"
        ></div>
        <!-- 时间、单位条件筛选 -->
        <div class="search-wrap">
            <div class="date-type">
                <span
                    class="date-type-item"
                    :class="{ active: cycleType == 3 }"
                    @click="cycleType = 3"
                    >月</span
                >
                <span
                    class="date-type-item"
                    :class="{ active: cycleType == 4 }"
                    @click="cycleType = 4"
                    >年</span
                >
            </div>
            <div class="org-choose-wrap">
                <!-- 单位筛选框 -->
                <el-select
                    v-model="searchForm.orgId"
                    slot="prepend"
                    placeholder="请选择"
                    @change="getAllData"
                >
                    <el-option
                        v-if="isMuilUnitUser"
                        label="所有单位"
                        :value="$store.state.userInfo.organizationIds"
                    ></el-option>
                    <el-option
                        v-for="item in orgList"
                        :label="item.orgName"
                        :value="item.orgId.toString()"
                        :key="item.orgId"
                    ></el-option>
                </el-select>
            </div>
        </div>
        <!-- 统计图表 -->
        <div class="content-wrap" v-show="showEcharts">
            <div class="time-trend-wrap">
                <p class="echart-title">重大问题时间走势</p>
                <div id="timeTrendEchart123" class="time-trend-echart"></div>
            </div>
            <div class="time-trend-wrap">
                <p class="echart-title">重大问题单位分布</p>
                <div id="timeTrendEchart" class="time-trend-echart"></div>
            </div>
        </div>
        <div
            class="content-wrap unit-list-wrap"
            style="margin-top:0;"
            v-show="!showEcharts"
        >
            <ul
                class="unit-list"
                v-infinite-scroll="getHisImportQuestionData"
                :infinite-scroll-disabled="isOver"
                infinite-scroll-distance="10"
            >
                <template>
                    <!-- 单位list -->
                    <li v-for="(item, index) in infoList" :key="index">
                        <div
                            class="unit-item yellow-bg"
                            :class="[
                                { 'blue-bg': item.status == 1 },
                                { 'yellow-bg': item.status == 0 }
                            ]"
                        >
                            <!-- 可以和上面合并根据条件判断显示该div -->
                            <div
                                class="top_img"
                                :class="[
                                    { top_img_no: item.status == 1 },
                                    { top_img_yes: item.status == 0 }
                                ]"
                                style="text-align:center;"
                            >
                                <img
                                    :src="item.detailPic"
                                    v-if="
                                        item.questionType == 3 ||
                                            item.questionType == 1 ||
                                            item.questionType == 2
                                    "
                                    style="width:100%;height:100%"
                                />
                                <div
                                    class="import_type_guzhang"
                                    v-if="
                                        item.questionType == 5 ||
                                            item.questionType == 4
                                    "
                                >
                                    <p
                                        style="line-height:130px;font-size:84px;color:#F0A045;"
                                    >
                                        6
                                    </p>
                                    <p
                                        style="line-height:35px;font-size:17px;margin-top:-25px;color:#FFFFFF;"
                                    >
                                        {{ item.questionDetail }}
                                    </p>
                                </div>
                            </div>
                            <div class="import_describe">
                                {{ item.selfDesc }}
                            </div>
                            <div class="import_company">
                                <span class="import_text">所属单位</span>
                                <span class="import_value">{{
                                    item.organizationName
                                }}</span>
                            </div>
                            <div class="import_gotime">
                                <span class="import_text">持续时长</span>
                                <span class="import_value"
                                    >已持续{{ item.intervalTime }}</span
                                >
                            </div>
                            <div class="import-info">
                                <p class="status-text" v-if="item.status == 0">
                                    未处理，请及时处理
                                </p>
                                <p
                                    class="status-text"
                                    style="color:#46B98F"
                                    v-if="item.status == 1"
                                >
                                    已处理
                                </p>
                            </div>
                            <!-- hover -->
                            <div class="hover-card">
                                <p class="import_company">
                                    {{ item.organizationName }}
                                </p>
                                <p
                                    class="improt_gotime_hover"
                                    style="color:white"
                                >
                                    已持续{{ item.intervalTime }}
                                </p>
                                <div v-if="showPhoneCall" class="call-wrap" style="margin-top:10px;">
                                    <a
                                        class="call-phone iconfont icon_phone"
                                        @click="callPhone(item.organizationId)"
                                    ></a>
                                </div>
                                <div
                                    class="import-details"
                                    style="margin-top:5px"
                                >
                                    <div :class="{ 'is-higher':!showPhoneCall }" class="import-details-content">
                                        <ul class="import-details-list">
                                            <li class="import-details-item">
                                                <span class="import_text_hover"
                                                    >发生时间</span
                                                >
                                                <span
                                                    class="import_value_hover"
                                                    style="margin-left:10px;"
                                                    >{{ item.startTime }}</span
                                                >
                                            </li>
                                            <li class="import-details-item">
                                                <span class="import_text_hover"
                                                    >问题描述</span
                                                >
                                                <div
                                                    class="import_value_hover"
                                                    style="margin-left:10px;display:inline"
                                                >
                                                    {{ item.selfDesc }}
                                                </div>
                                            </li>
                                            <li class="import-details-item">
                                                <!-- <span class="import_text_hover" style="font-size: 20px">已处理</span> -->
                                                <span
                                                    class="import_text_hover"
                                                    style="font-size: 20px"
                                                    v-if="item.status == 0"
                                                    >未处理</span
                                                >
                                                <span
                                                    class="import_text_hover"
                                                    style="font-size: 20px"
                                                    v-if="item.status == 1"
                                                    >已处理</span
                                                >
                                            </li>
                                            <li class="import-details-item">
                                                <span class="import_text_hover"
                                                    >填报人</span
                                                >
                                                <span
                                                    class="import_value_hover"
                                                    style="margin-left:10px;"
                                                    >{{
                                                        item.handlerAccountName
                                                    }}</span
                                                >
                                            </li>
                                            <li class="import-details-item">
                                                <span class="import_text_hover"
                                                    >处理类型</span
                                                >
                                                <span
                                                    class="import_value_hover"
                                                    style="margin-left:10px;"
                                                    >{{
                                                        item.handlerTypeName
                                                    }}</span
                                                >
                                            </li>
                                            <li class="import-details-item">
                                                <span class="import_text_hover"
                                                    >备注</span
                                                >
                                                <div
                                                    class="import_value_hover"
                                                    style="margin-left:10px;display:inline"
                                                >
                                                    {{ item.remarks }}
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </template>
            </ul>
            <!-- 暂无数据 -->
            <div class="no-data" v-if="isOver && infoList.length == 0"></div>
        </div>
    </div>
</template>
<script>
import { getOrgsStatusList } from "@/api/organization";
import {
    getHisImportQuestionCount,
    getHisImportQuestionTopOrg,
    getHisImportQuestion
} from "@/api/record";

let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/component/grid");

export default {
    data() {
        return {
            needPage: true, //是否需要切换按钮
            showEcharts: true, // 是否显示统计图表
            cycleType: 3, // 3月 4年
            searchForm: {
                orgId: this.$store.state.userInfo.organizationIds
            },
            timeTrendList: [],
            infoList: [],
            pageIndex: -1,
            pageSize: 20,
            isOver: false,
            isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser, //0:单单位用户;1:多单位用户
            showPhoneCall:this.bsConfig.showPhoneCall!==false
        };
    },
    computed:{
        orgList(){
            return this.$store.state.orgList
        }
    },
    created() {
        this.$nextTick(() => {
            this.getTimeTrendData();
            this.getimportCountData();
        });
    },
    methods: {
        // 切换页面显示
        changePage() {
            this.showEcharts = this.showEcharts ? false : true;
        },
        // 查询条件改变，重新获取数据
        getAllData() {
            this.getTimeTrendData();
            this.getimportCountData();
            this.getHisImportQuestionData(0);
        },
        // 获取重大问题时间走势数据
        getTimeTrendData() {
            let that = this;
            getHisImportQuestionCount({
                type: that.cycleType,
                orgIds:
                    that.searchForm.orgId ||
                    that.$store.state.userInfo.organizationIds
            }).then(res => {
                if (res.status === 200) {
                    that.timeTrendList = res.data;
                    that.initTimeQuestionEcharts(res.data);
                }
            });
        },
        // 获取重大问题单位分布
        getimportCountData() {
            let that = this;
            getHisImportQuestionTopOrg({
                type: that.cycleType,
                orgIds:
                    that.searchForm.orgId ||
                    that.$store.state.userInfo.organizationIds,
                topNum: 10
            }).then(res => {
                if (res.status === 200) {
                    that.timeTrendList = res.data;
                    that.importQuestionEchart(res.data.reverse());
                }
            });
        },
        // 获取重大问题列表
        getHisImportQuestionData(pageIndex) {
            let that = this;
            that.$Ctl.loading(1, 10000);
            if (typeof pageIndex != "undefined") {
                that.pageIndex = pageIndex;
            } else {
                that.pageIndex += 1;
            }
            let parames = {
                queryType: 1,
                orgIds:
                    that.searchForm.orgId ||
                    that.$store.state.userInfo.organizationIds,
                pageIndex: that.pageIndex,
                pageSize: that.pageSize,
                type: that.cycleType
            };
            getHisImportQuestion(parames).then(res => {
                if (res.status === 200) {
                    that.$Ctl.loading(0);
                    if (
                        typeof pageIndex != "undefined" &&
                        that.pageIndex === 0
                    ) {
                        that.isOver = false;
                        // 重新查询
                        that.infoList = res.data;
                    } else {
                        //that.infoList = $.extend(that.infoList, res.data)
                        that.infoList.push.apply(that.infoList, res.data);
                    }

                    // 最后一页停止滚动加载
                    if (res.data.length < that.pageSize) {
                        that.isOver = true;
                    } else {
                        that.isOver = false;
                    }
                }
            });
        },
        // 初始化重大问题时间走势图表
        initTimeQuestionEcharts(data) {
            let that = this;
            let xArray = [];
            let yArray = [];
            $.each(data, (index, obj) => {
                xArray.push(that.cycleType == 3 ? obj.dayTime : obj.monthTime);
                yArray.push(obj.questionCount);
            });
            //画图
            let options1 = {
                grid: {
                    left: "40px",
                    right: "30",
                    top: "35",
                    bottom: "30"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        animation: false
                    },
                    formatter:
                        '{b}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4191F0;"></span>重大问题{c}个'
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: {
                            show: true,
                            interval: 0
                        },
                        boundaryGap: false,
                        splitNumber: xArray.length,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(105, 115, 125, 0.3)"
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: "#A3BEDD",
                            interval: 0,
                            // rotate: -45,
                            formatter: function(value, index) {
                                if (that.cycleType == 3) {
                                    return value.substring(5);
                                } else {
                                    return value;
                                }
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(105, 115, 125, 0.3)"
                            }
                        },
                        data: xArray
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        axisTick: { show: false },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(105, 115, 125, 0.3)"
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(105, 115, 125, 0.3)",
                                width: 1
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 10,
                        // areaStyle: { normal: {} },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "#fff"
                            }
                        },
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 1.5 //折线宽度
                                },
                                color: "#4191F0" //折线颜色
                            },
                            emphasis: {
                                color: "#4191F0"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(105, 115, 125, 0.3)",
                                width: 1
                            }
                        },
                        data: yArray
                    }
                ]
            };
            Echarts.init(
                document.getElementById("timeTrendEchart123")
            ).setOption(options1, true);
        },
        importQuestionEchart(data) {
            let that = this;
            let xArray = [];
            let yArray = [];
            $.each(data, (index, obj) => {
                xArray.push(obj.orgName);
                yArray.push(obj.questionCount);
            });
            //倒排序
            yArray.sort(function(a, b) {
                return b - a;
            });
            var yMax = yArray[0];
            let dataShadowMax = [];
            for (var i = 0; i < yArray.length; i++) {
                dataShadowMax.push(yMax);
            }
            let shadowArrY = yArray.map((item, index, arr) => {
                var colorList = [
                    "rgba(228, 95, 92, 1)",
                    "rgba(224, 105, 98, 1)",
                    "rgba(238, 130, 59, 1)",
                    "rgba(238, 169, 59, 1)",
                    "rgba(240, 199, 85, 1)",
                    "rgba(93, 183, 221, 1)",
                    "rgba(93, 159, 221, 1)",
                    "rgba(93, 126, 221, 1)",
                    "rgba(93, 108, 221, 1)",
                    "rgba(55, 91, 225, 1)"
                ];
                return {
                    value: item,
                    itemStyle: {
                        barGap: "-100%",
                        normal: {
                            shadowColor: colorList[index],
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0
                        }
                    }
                };
            });
            let options = {
                grid: {
                    left: "40px",
                    right: "20",
                    top: "35",
                    bottom: "30"
                },
                tooltip: {
                    trigger: "item"
                },
                xAxis: [
                    {
                        type: "category",
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#A3BEDD"
                            }
                        },
                        axisTick: {
                            show: false,
                            color: "#707070"
                        },
                        axisLine: {
                            show: false
                        },
                        data: xArray
                    }
                ],
                yAxis: {
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(105, 115, 125, 0.3)",
                            width: 1
                        }
                    }
                    //data: ['20', '40', '60', '80', '100'],
                },
                series: [
                    {
                        // For shadow
                        type: "bar",
                        itemStyle: {
                            normal: {
                                color: new Echarts.graphic.LinearGradient(
                                    1,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(255,255,255,.09)"
                                        },
                                        {
                                            offset: 0.5,
                                            color: "rgba(255,255,255,.1)"
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(255,255,255,.15)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(255,255,255,.2)"
                                        }
                                    ]
                                )
                            }
                        },
                        barGap: "-100%",
                        barWidth: xArray.length > 1 ? "40%" : "10%",
                        // barCategoryGap: "20%",
                        data: dataShadowMax,
                        animation: false,
                        tooltip: {
                            show: false
                        }
                    },
                    {
                        type: "bar",
                        barWidth: xArray.length > 1 ? "40%" : "10%",
                        color: function(params) {
                            var colorList = [
                                "rgba(228, 95, 92, 1)",
                                "rgba(224, 105, 98, 1)",
                                "rgba(238, 130, 59, 1)",
                                "rgba(238, 169, 59, 1)",
                                "rgba(240, 199, 85, 1)",
                                "rgba(93, 183, 221, 1)",
                                "rgba(93, 159, 221, 1)",
                                "rgba(93, 126, 221, 1)",
                                "rgba(93, 108, 221, 1)",
                                "rgba(55, 91, 225, 1)"
                            ];
                            return colorList[params.dataIndex];
                        },

                        data: shadowArrY
                    }
                ]
            };
            Echarts.init(document.getElementById("timeTrendEchart")).setOption(
                options,
                true
            );
        },
        callPhone(orgId) {
            this.$emit("openCellCenter", orgId);
        }
    },
    watch: {
        cycleType(val, oldVal) {
            if (val && oldVal != val) {
                this.getAllData();
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.history-import-page-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    .change-page-btn {
        position: absolute;
        top: -70px;
        right: 0;
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 28px;
        color: #3b88ba;
        background: rgba(70, 153, 255, 0.1);
        cursor: pointer;
    }
    .content-wrap {
        .time-trend-wrap {
            margin-bottom: 1%;
            padding: 40px 50px 10px 50px;
            width: 100%;
            height: 49%;
            background: rgba(255, 255, 255, 0.02);
            .time-trend-echart {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
        .time-point-distribution-wrap {
            padding: 35px 50px 10px 50px;
            width: 49.5%;
            height: 49%;
            background: rgba(255, 255, 255, 0.02);
            .time-point-distribution-echart {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
        .weekly-distribution-wrap {
            padding: 35px 50px 10px 50px;
            width: 49.5%;
            height: 49%;
            background: rgba(255, 255, 255, 0.02);
            .weekly-distribution-echart {
                margin-top: -40px;
                width: 100%;
                height: 100%; //calc(100% - 40px);
            }
        }
    }
    .yellow-bg {
        background: url(../../../../../assets/images/detailPage/yellow_item_bg.png)
            center center no-repeat;
        background-size: contain;
    }
    .top_img {
        width: 270px;
        height: 165px;
    }
    .top_img_no {
        width: 270px;
        height: 165px;
        background-color: #172f6b;
    }
    .top_img_yes {
        width: 270px;
        height: 165px;
        background-color: #262612;
    }
    .import_describe {
        font-size: 18px;
        margin-top: 10px;
        color: white;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .import_company {
        margin-top: 10px;
        font-size: 14px;
        .import_text {
            color: #868378;
        }
        .import_value {
            color: white;
            margin-left: 10px;
        }
    }
    .import_gotime {
        font-size: 14px;
        .import_text {
            color: #868378;
        }
        .import_value {
            color: white;
            margin-left: 10px;
        }
    }
    .import-info {
        font-size: 22px;
        font-weight: 400;
        line-height: 56px;
        color: #e6a246;
        text-align: center;
    }
    .hover-card {
        background: url(../../../../../assets/images/detailPage/yellow-item-bg-hover.png)
            center center no-repeat;
        //margin-top: -22px;
        .import_company {
            font-size: 24px;
            font-weight: bold;
            color: white;
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 220px;
        }
    }
    .hover-card .import_gotime_hover {
        font-size: 14px;
        color: white;
    }
    .import-details {
        .import-details-title {
            font-size: 20px;
            font-weight: bold;
            color: #4e9ed6;
            line-height: 44px;
        }
        .import-details-content {
            height: 140px;
            font-size: 14px;
            color: #fff;
            overflow: auto;
            &.is-higher{
                height: 240px;
            }
            .import-details-list {
                display: flex;
                flex-direction: column;
                list-style: none;
                .import-details-item {
                    width: 100%;
                    line-height: 26px;
                }
            }
        }
    }
    .status-text {
        margin-top: 10px;
    }
    .unit-list-wrap {
        padding: 20px 0;
    }
}
</style>
